import React, { useEffect, useState } from 'react';

import { Link, withRouter } from "react-router-dom";
import { useBack } from "../hook/index";
import { connect } from 'react-redux';
import isLogin from "../../store/action/isLogin";
import logOut from "../../store/action/logout";





function Header (props) {
  // HTTP.post('/lecturer/lists?page=1&rows=20', {
  // 	order: "desc",
  // 	sort: "id",
  // 	category_id: 1,
  // 	recommend: 1
  // }).then((res) => {
  // 	console.log('res', res)
  // })
  console.log('props-head', props)
  let { userName, changeShow } = props;
  const back = useBack(props.history);
  const pathName = props.location.pathname;
  const [showOut, setShowOut] = useState(false);


  const logout = () => {
    props.dispatch(logOut());
  }

  const getUser = (pathName, userName) => {
    if (pathName === '/login') return '';
    if (userName) {
      return <span onClick={() => { console.log('showOut', showOut); setShowOut(!showOut) }} className="header-btn-right header-user">{userName || '123'}<span onClick={() => {
        logout();
      }} style={{ display: showOut ? 'block' : 'none' }} className="header-user">退出</span></span>
    } else {
      return <Link to="/login" className="user" />;
    }
  }

  useEffect(() => {
    props.dispatch(isLogin());
  }, [])

  return (
    <header id="header">
      <nav className="menu">
        {
          pathName === '/login' ? <a className="header-btn-left iconfont icon-back" onClick={() => back()}></a> : <a className="more" onClick={() => {
            changeShow && changeShow();
          }} ></a>
        }
      </nav>
      {getUser(pathName, userName)}
    </header>
  )
}

export default connect((state) => {
  console.log('head', state);
  return { userName: state.getUser }
})(withRouter(Header));